<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式绑定</title>
    <script src="https://unpkg.com/vue@next"></script>
    <style>
        .red {
            color: red
        }
        .blue {
            color: blue
        }
    </style>
  </head>
  <body>
    <div id="Application">
        <!-- 与注释掉的js适配
        <div :class="{blue:isBlue,red:isRed}">
            示例文案
        </div>
        -->
        <!--
        <div :class="style">
            示例文案
        </div>
        -->
        
        <!--
        <div :class="redClass,fontClass">
            示例文案
        </div>
        -->
        <div :style="{color:textColor, fontSize: textFont}">
            示例文案
        </div>
    </div>
  </body>

  <script>
    const App= {
      data(){
        /** 与注释掉的html适配
        return {
            isBlue:true,
            isRed:false
        }
        ***/

        /**
        return {
            style:{
                blue:true,
                red:false
            }
        }
        ***/
        
        /**
        return {
            redClass:"red",
            fontClass:"font"
        }
        ***/

        return {
            textColor:"red",
            textFont:"50px"
        }
      }
    }
    Vue.createApp(App).mount("#Application")
  </script>

</html>